import { useEffect } from 'react';

/**
 * 职级描述
 * 因为是 d3 绘制的元素, 无法正常绑定react事件. 所以使用委托的方式来实现.
 * @param treeId
 * @param jobRankModalRef
 * @returns {[boolean, undefined, undefined]}
 */
const useEmployeeListItemRank = (treeId, jobRankModalRef) => {
    const currentNode = document.querySelector(`#${treeId} .rd3t-tree-container`);

    useEffect(() => {
        const clickHandle = e => {
            const { target } = e;
            // employeeCode 必须有值, 因为存在没有 "暂无员工" 这样的记录
            const className = target.className?.toString();
            if (className.includes('employeeItemRank') && !className.includes('disabled') && target.dataset.rankCode) {
                jobRankModalRef.current.open(target.dataset.rankCode);
            }
        };
        if (currentNode) {
            currentNode.addEventListener('mousedown', clickHandle);
        }

        return () => {
            if (currentNode) {
                currentNode.removeEventListener('mousedown', clickHandle);
            }
        };
    }, [currentNode]);
};

export default useEmployeeListItemRank;
